﻿@model EstimateShippingModel
@using Nop.Web.Models.ShoppingCart;
@if (Model.Enabled)
{
    <div class="shipping">
        <script type="text/javascript">
            $(document).ready(function () {
                $("#@Html.FieldIdFor(model => model.CountryId)").change(function() {
                    var selectedItem = $(this).val();
                    var ddlStates = $("#@Html.FieldIdFor(model => model.StateProvinceId)");
                    var estimateProgress = $("#estimate-shipping-loading-progress");
                    estimateProgress.show();
                    $.ajax({
                        cache: false,
                        type: "GET",
                        url: "@(Url.RouteUrl("GetStatesByCountryId"))",
                        data: { "countryId": selectedItem, "addSelectStateItem": "false" },
                        success: function(data) {
                            ddlStates.html('');
                            $.each(data, function(id, option) {
                                ddlStates.append($('<option></option>').val(option.id).html(option.name));
                            });
                            estimateProgress.hide();
                        },
                        error: function(xhr, ajaxOptions, thrownError) {
                            alert('Failed to retrieve states.');
                            estimateProgress.hide();
                        }
                    });
                });
            });
        </script>

        <div class="estimate-shipping">
            <div class="title">
                <strong>@T("ShoppingCart.EstimateShipping")</strong>
            </div>
            <div class="hint">@T("ShoppingCart.EstimateShipping.Tooltip")</div>
            <div class="shipping-options">
                <div class="inputs">
                    @Html.LabelFor(model => model.CountryId, new { }, ":")
                    @Html.DropDownListFor(model => model.CountryId, Model.AvailableCountries, new { @class = "country-input" })
                    <span class="required">*</span>
                </div>
                <div class="inputs">
                    @Html.LabelFor(model => model.StateProvinceId, new { }, ":")
                    @Html.DropDownListFor(model => model.StateProvinceId, Model.AvailableStates, new { @class = "state-input" })
                    <span id="estimate-shipping-loading-progress" style="display: none;" class="please-wait">@T("Common.Wait...")</span>
                </div>
                <div class="inputs">
                    @Html.LabelFor(model => model.ZipPostalCode, new { }, ":")
                    @Html.TextBoxFor(model => model.ZipPostalCode, new { @class = "zip-input" })
                </div>
                <div class="buttons">
                    <input id="estimate-shipping-button" type="button" value="@T("ShoppingCart.EstimateShipping.Button")" class="button-2 estimate-shipping-button" />
                </div>
            </div>
            <div class="estimate-shipping-result"></div>
        </div>
    </div>
}
<script type="text/javascript">
    $(document).ready(function () {
        $('#estimate-shipping-button').click(function() {
            displayAjaxLoading(true);
            $.ajax({
                cache: false,
                type: "POST",
                url: "@(Url.RouteUrl("EstimateShipping"))",
                data: $("#shopping-cart-form").serialize(),
                success: function(data) {
                    displayAjaxLoading();
                    $('.estimate-shipping-result').html(data);
                },
                error: function(xhr, ajaxOptions, thrownError) {
                    displayAjaxLoading();
                    alert('Failed to retrieve estimate shipping.');
                }
            });
        });
    });
</script>